import { Fill, Style, Text, Icon, Stroke, Circle } from 'ol/style'
import Feature from 'ol/Feature'
import Point from 'ol/geom/Point'
import Overlay from 'ol/Overlay'
// import color from '@public/utils/color'

const mapUtils = {}
// 1、mapConfig文件中mapUrls业务图层控制
/**
 * 根据数据创建地图上实体
 * @param {Float} lgtd 经度
 * @param {Float} lttd 纬度
 * @param {String} title 图层名称
 * @param {Style} style 要素的样式对象（ol中对象哦）
 * @param {*} item 实体的其他属性数据
 */
mapUtils.createFeature = function (lgtd, lttd, title, style, item) {
  lgtd = parseFloat(lgtd)
  lttd = parseFloat(lttd)
  const feature = new Feature({
    geometry: new Point([lgtd, lttd]),
    layerNm: title
  })
  // 设置id
  if (item) {
    if (item.ID || item.Id || item.STCD || item.stcd || item.WarnID) {
      feature.setId(title + '_' + (item.ID || item.Id || item.STCD || item.stcd || item.WarnID))
    }
    feature.setProperties(item, false)
  }

  if (style) feature.setStyle(style)
  return feature
}
/**
 * 根据数据创建地图上实体
 * @param {String} text 文字标注
 * @param {String} iconSrc 图片路径
 * @param {String} textColor 文字颜色
 * @param {String} backColor 文字背景颜色
 * @param {String} textX 文本x方向偏移量
 * @param {String} textY 文本y方向偏移量
 * @param {Array} iconSize 图片大小
 * @param {string} customCircleColor 自定义 绘制圆圈 颜色
 */
mapUtils.createStyle = function (text, iconSrc, textColor, backColor, textX, textY, iconSize, customCircleColor) {
  text = text + ''
  // 有图片时且未设置横向偏移量，自动计算文字横向偏移量
  if (iconSrc && !textX) {
    const x1 = iconSize[0] / 2
    const x2 = (text.length / 2) * 7 // 此处按一个数字7px计算 未考虑汉字
    textX = x1 + x2
    // 再加上修正值
    textX = textX + iconSize[0] * 1.5
  }
  // console.log(textX, textY)
  // debugger
  const styleOpt = {
    text: new Text({
      font: '14px Microsoft YaHei',
      text: text,
      offsetX: textX,
      offsetY: textY || 0,
      fill: new Fill({
        color: textColor || '#242d55'
      }),
      backgroundStroke: new Stroke({
        color: backColor || 'rgba(0, 0, 255, 0)',
        width: 20
      })
    })
  }
  if (iconSrc) {
    styleOpt.image = new Icon({
      src: iconSrc,
      size: iconSize,
      offset: [0, 0],
      crossOrigin: 'anonymous'
    })
  } else if (customCircleColor) {
    // 绘制 图标
    styleOpt.image = new Circle({
      radius: 5,
      size: iconSize,
      offset: [0, 0],
      fill: new Fill({
        color: customCircleColor
      }),
      stroke: new Stroke({
        // color: '#333333',
        color: 'gray',
        width: 1
      })
    })
  }
  return new Style(styleOpt)
}

mapUtils.setLayerData = function (mapHelper, title, features, clear = true) {
  if (mapHelper && title && features) {
    const layer = mapHelper.getLayer(title)
    if (layer) {
      const source = layer.getSource()
      if (clear) {
        source.clear()
      }
      source.addFeatures(features)
    }
  }
}

/**
 * 获取地图 事件触发点 对应的所有Features和图层title
 * @param {*} map 地图对象
 * @param {*} evt 点击事件
 * @param [*] enablelayerTitles 触发的有效图层 Ttitle list
 */
mapUtils.getFeaturesBindTitlesByEvt = function (map, evt, enablelayerTitles) {
  if (!map || !evt) return
  const eventTitleFeature = {}
  map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
    const title = layer.get('title')
    if (enablelayerTitles.includes(title)) {
      if (!eventTitleFeature[title]) eventTitleFeature[title] = []
      eventTitleFeature[title].push(feature)
    }
  })
  return eventTitleFeature
}

/**
 * 显示地图上的制定ppopup
 * @param {*} map 地图对象
 * @param {String} id 实体id
 * @param {*} coordinates 显示位置
 */
mapUtils.getPop = function (map, id) {
  if (!map || !id) return
  return map.getOverlayById(id)
}

mapUtils.openPop = function (popup, feature) {
  if (!popup) return
  if (feature && feature.getGeometry()) {
    const coordinateVal = feature.getGeometry().getFirstCoordinate()
    popup.setPosition(coordinateVal)
  }
}

/**
 * 创建地图上的popup实体
 * @param {*} map 地图对象
 * @param {String} id 实体id
 * @param {Object} el 实体要挂载的容器
 * @param {String} textX 文本x方向偏移量
 * @param {String} textY 文本y方向偏移量
 * @param {Boolean} autoPan 是否总动避让
 * @param {stopEvent} autoPan 冒泡：true / false
 */
mapUtils.createOverlay = function (map, id, el, textX, textY, autoPan, stopEvent = false) {
  if (map && id && el) {
    let popup = map.getOverlayById(id)

    // 没有就创建
    if (!popup && el) {
      popup = new Overlay({
        id: id,
        element: el,
        positioning: 'bottom-center',
        stopEvent,
        autoPan: autoPan || false,
        offset: [textX || 0, textY || -5]
      })
      map.addOverlay(popup)
      popup.setPosition(undefined)
      el.style.display = 'block' // css 声明隐藏，此处需显示
    }

    return popup
  }
}
mapUtils.removeOverlay = function (mapHelper, id, isPrefix = false) {
  if (mapHelper && id) {
    const map = mapHelper.getMap()

    // 是否删除id开头的所有标注（模糊删除）
    if (isPrefix === true) {
      mapHelper.removeOverlays(id)
    } else {
      const popup = map.getOverlayById(id)

      // 有就删除
      if (popup) {
        map.removeOverlay(popup)
      }
    }
  }
}

mapUtils.featureTipsID = 'featureTipsId'

mapUtils.createTips = function (mapHelper, feature, text, cls = 'ol-lable') {
  if (!mapHelper || !feature || !text) return
  this.removeOverlay(mapHelper, this.featureTipsID)
  var el = document.createElement('div')
  el.style.cssText = `min-width:65px;width:${text.length * 10 + 30}px;`
  el.className = `${cls}`
  el.innerText = `${text}`
  const popup = this.createOverlay(mapHelper.getMap(), this.featureTipsID, el)
  if (popup) {
    this.openPop(popup, feature)
  }
}
mapUtils.closeTips = function (map) {
  this.closePop(map, this.featureTipsID)
}

/**
 * 关闭地图上的制定ppopup
 * @param {*} map 地图对象
 * @param {String} id 实体id
 */
mapUtils.closePop = function (map, id) {
  if (!map || !id) return
  const popup = this.getPop(map, id)
  if (popup) {
    popup.setPosition(undefined)
  }
}

export default mapUtils
